<template>
  <view class="addLiaison-box">
    <view class="addLiaison-content">
      <view class="content-box">
        <u-form :model="form" ref="uForm">
          <u-form-item label="联系人" label-width="112" prop="name">
            <u-input v-model="form.name" placeholder="请填写联系人姓名" />
          </u-form-item>
          <u-form-item label="联系电话" label-width="auto" prop="telPhone">
            <u-input v-model="form.telPhone" placeholder="请填写联系电话" />
          </u-form-item>
        </u-form>
          <view class="content-tag">
            设置标签
          </view>
          <view class="content-text">
           <u-tag class="tags-text" :text="item.dictName" v-for='(item,dictValue) in drugRelationList' :key='dictValue'
            :type="drugRelation === item.dictValue?'primary':'info'" mode="plain" show="true" @click="tagClick(item)" />
          </view>
          <view class="content-default">
            <view class="default-left">
              <view class="default-text1">设置默认联系人</view>
              <view class="default-text2">提醒:每次下单都会默认推荐使用该联系人</view>
            </view>
            <u-switch :active-value="1" :inactive-value="0" @change="onChange" v-model="isDefault" active-color="#00CBCB" size="40rpx" :loading="loading"></u-switch>
          </view>
      </view>
    </view>
    <view class="addLiaison-button">
      <u-modal v-model="show" 
        show-cancel-button="isCancel"
        cancel-text="取消"
        :content="content" 
        :show-title=isTitle
        @confirm="confirm"
        @cancel="cancel"
        >
       </u-modal>
       <!-- <view class="buttons"> -->
          <u-button  @click="conserve" size="medium" type="primary" shape="circle" >保存并使用</u-button>
          <u-button  @click="delLiaison" size="medium" type="error" shape="circle" >删除</u-button>
       <!-- </view> -->
  </view>
  </view>
</template>

<script>
	import { mapActions,mapState } from 'vuex';
export default {
  data() {
	return {
        form: {
          name: '',
          telPhone: '',
        },
        show:false,
        isTitle:false,
        isCancel:true,
        content:'确定要删除联系人吗',
        // dataType: [],
        // 联系信息
        liaisonData:{},
		    itemType:[],
        // 选中的联系人标签
        drugRelation:'',
        selectDefaul:'0',
        isDefault: false,
        rules:{
          name:[
            {required: true,message: '请输入联系人姓名',trigger: ['change','blur']},
          ],
           telPhone:[
            {required: true,message: '请输入联系人电话',trigger: ['change','blur']},
            {validator: (rule, value, callback) => {
              return this.$u.test.mobile(value);
              },
              message: '联系人电话不正确',
              trigger: ['change','blur'],
            }
          ]
        }
		}
	},
  onInit(){
  },
  onLoad (option) { 
	  // 接收到用户选中的数据
		this.liaisonData = option
		this.form = {...option}
		this.drugRelation = option.drugRelation
    this.init()
    if(option.isDefault === '1'){
      this.isDefault = true
      this.selectDefaul = option.isDefault
    }
    },
  onReady() {
    this.$refs.uForm.setRules(this.rules)
  },
  computed:{
    ...mapState({
			drugRelationList: state => state.shop.drugRelationList
    }),
    drugRelatioAnme(){
        this.drugRelationList.map(item=>{
        this.$set(item,'type','info')
        return item
        })
      }
  },  
  methods:{
...mapActions(['ActGetAppDictList','ActUpdateMemberUser','ActDeleteMemberUser']),
    tagClick(item){
      this.drugRelation = item.dictValue
    },
    async init(){
      await this.ActGetAppDictList({
        dictType:'drug_relation',isCtr:'0'
      })
    },
    onChange(value){
        this.selectDefaul = value
      },
    // 保存
    conserve(){
      this.$refs.uForm.validate(async(valid) => {
        if(!valid){
          return
        }else{
          if(!this.drugRelation){
            this.$refs.uToast.show({
              title: '请选择标签',
            })
          }else{
            const formData = {
              name:this.form.name,
              telPhone:this.form.telPhone,
              drugRelation:this.drugRelation,
              isDefault:this.selectDefaul,
              id:this.liaisonData.id
            }
           const res1 = await this.ActUpdateMemberUser(formData)
           if(res1.success){
            this.$store.dispatch('ActGetLiaisonList')
            uni.navigateBack()
           }else{
             uni.showModal({
                  title: '提示',
                  content: res1.msg,
                  showCancel:false
              });
           }
          }
        }
      })
    },
    delLiaison(){
      this.show = true
    },
    cancel(){
      this.show = false
    },
    // 删除
    async confirm(){
      const res1 = await this.ActDeleteMemberUser({id:this.liaisonData.id})
      if(res1.success){
      // uni.showModal({
      //     title: '提示',
      //     content: res1.msg,
      //     showCancel:false
      // });
      this.$store.dispatch('ActGetLiaisonList')
      uni.navigateBack()
      }else{
        uni.showModal({
          title: '提示',
          content: res1.msg,
          showCancel:false
      });
      }
      
    },
  // async getTag(){
  //   const {code,data} = await this.ActLiaisonTag()
  //   if(code === 200 ){
  //     this.dataType = data.map(item=>{
  //     this.$set(item,'type','info')
  //     return item
  //     })
  //   }
  // },
  },
}
</script>

<style lang="scss" scoped>
page {  
	height: 100%;
	background-color: #f6f6f6;
}
.addLiaison-box{
  margin: 0 24rpx;
  .addLiaison-content{
    padding: 0 24rpx;
    border-radius: 16rpx;
    background-color:#FFF;
    margin-top: 24rpx;
    .content-box{
      u-form-item{
        color: #333333;
        font-size: 28rpx;
        font-weight: 500;
      }
      .content-tag{
        padding-top: 28rpx;
        color: #333333;
        font-size: 28rpx;
        font-weight: 500;
      }
      .content-text{
        padding: 32rpx 0 32rpx;
        border-bottom: 2rpx solid #F6F6F6;
        .tags-text{
          margin: 12rpx;
        }
      }
      .content-default{
        display: flex;
        padding: 24rpx 0;
        .default-left{
          .default-text1{
            color: #333333;
            font-weight: 500;
            font-size: 28rxp;
          }
          .default-text2{
            font-size: 18rxp;
            margin-top: 12rpx;
          }
        }
        u-switch{
          margin-left: 48rpx;
        }
      }
    }
  }
  .addLiaison-button{
    padding-top: 48rpx;
    display: flex;
    justify-content:center;
    u-button{
      padding: 0 24rpx;
    }
  }
}
</style>